<!--
  @Description:新导航(首页导航)
  @Author:zqy
  @Date:2022-12-23 16:20:35
  @Last Modified by:zqy
  @Last Modified time:2023-08-27 16:36:23
-->
<template>
  <div>
    <table-box
      v-if="tabDefineData && tabDefineData.id"
      ref="refTable"
      class="nav-tab-list"
      :selected-arry.sync="tableSelected"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      table-row-key="id"
      :table-sortable="false"
      :show-custom-setting="false"
      :table-tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      @btnOperate="btnOperate"
    >
      <div slot="outerbtn-before" class="head-tips"><i class="el-icon-info" /><span>导航最多创建{{ tabLevelName }}</span></div>
    </table-box>

    <edit-form
      v-if="showEdit"
      ref="formDlg"
      :visible.sync="showEdit"
      :detail-data="detailData"
      :tab-define-type="tabDefineData.type"
      :tab-define-id="tabDefineData.id"
      :tab-define-level="tabDefineData.showLevel"
      :default-platform="[defaultPlatform]"
      @success="refreshTable"
    />
  </div>
</template>

<script>
import EditForm from './EditForm'
import { getHomePageTabDefine } from '@/api/tabDefine'
import { getProductAdList } from '@/api/shopauxPlat/navConfig'
import TabConfigMixin from '@/mixins/TabConfigMixin'
export default {
  name: 'TabConfig',
  components: { EditForm },
  mixins: [TabConfigMixin],
  props: {
    defineTabData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    const that = this
    return {
      defaultPlatform: this.$route.query.platId === '2' ? 'pc' : 'mobile', // mobile  移动端， pc ,pad
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/v2TabConf/page`,
        tabIndex: 20, // 首页 20，自定义导航 201，分类:202 , 目录 203
        hideSearchBar: true,
        pageFlag: false,
        sort: 'sort',
        order: 'asc',
        setting: [
          {
            prop: 'tabName',
            label: '导航名称',
            minWidth: 250
          },
          {
            prop: 'picUrl',
            label: '导航图片',
            width: 120,
            overflowHidden: false,
            sortable: false,
            type: 'hidden',
            align: 'center',
            render: (_h, row) => {
              const iconUrl = row.picUrl || ''
              if (iconUrl) {
                if (iconUrl.indexOf('icon-') === 0) {
                  const className = `picIcon iconfont ${iconUrl}`
                  return (<div class='cover-image'><div class={className}></div></div>)
                } else {
                  const url = that.formatImageUrl(iconUrl)
                  return (<div class='cover-image'><img src={url} /></div>)
                }
              }
              return ''
            }
          },
          {
            prop: 'state',
            label: '是否显示',
            width: 100,
            formatData: ({ state }) => {
              return ['1', 1].includes(state) ? '是' : '否'
            }
          },
          {
            prop: 'showPlatform',
            label: '显示位置',
            width: 150,
            formatData: ({ showPlatform }) => {
              return this.fitlerPlatformName(showPlatform)
            }
          },
          {
            prop: 'sort',
            label: '排序',
            width: 200,
            sortable: false,
            type: 'hidden',
            overflowHidden: false,
            render: (_h, row) => {
              const btns = []
              if (this.hasPermission('top')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'top')} class='btn-green my-txt-btn'>置顶</el-button>)
              }
              if (this.hasPermission('up')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'moveUp')} class='btn-green my-txt-btn'>上移</el-button>)
              }
              if (this.hasPermission('down')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'moveDown')} class='btn-green my-txt-btn'>下移</el-button>)
              }
              if (this.hasPermission('bottom')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'bottom')} class='btn-green my-txt-btn'>置底</el-button>)
              }
              return _h('div', btns)
            }
          },
          {
            prop: 'opetate',
            label: '操作',
            width: 180,
            sortable: false,
            type: 'hidden',
            overflowHidden: false,
            render: (_h, row) => {
              const btns = []
              if (this.hasPermission('edit')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleEdit.bind(this, row)} class='btn-green my-txt-btn'>编辑</el-button>)
              }
              if (this.hasPermission('addChild') && !that.isLastNode(row.levelType)) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleAddChild.bind(this, row)} class='btn-green my-txt-btn'>新增子导航</el-button>)
              } else {
                btns.push(<el-button type='text' size='mini' class='btn-green my-txt-btn' style='visibility:hidden;width:62px'></el-button>)
              }
              if (this.hasPermission('del')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleDelete.bind(this, row)} class='btn-green my-txt-btn'>删除</el-button>)
              }
              return _h('div', btns)
            }
          }
        ],
        btnList: !this.isProduction || (this.defineTabData && this.defineTabData.id) ? [
          {
            buttonName: '新增一级导航',
            optCode: 'add',
            outerFlag: true
          }] : null
      }
    }
  },
  computed: {

  },
  async created() {
    if (this.defineTabData && this.defineTabData.id) {
      const setting = this.tableConfig.setting.filter(v => !['state', 'showPlatform'].includes(v.prop))
      this.$set(this.tableConfig, 'setting', setting)
      this.defineTabData = this.defineTabData
    } else {
      this.tabDefineData = await getHomePageTabDefine()
    }
    const otherFilters = [
      { id: 'showPlatform', property: 'showPlatform', operator: '=', value: this.defaultPlatform }
    ]
    if (this.tabDefineData && this.tabDefineData.id) {
      const { type, id } = this.tabDefineData
      otherFilters.push({ id: 'v2TabDefineId', property: 'v2TabDefineId', operator: '=', value: id })
      this.$set(this.tableConfig, 'tabIndex', [1, '1'].includes(type) ? 201 : 20)
    }
    this.otherFilters = otherFilters
    this.getBtnsList()
  },
  methods: {
    // 新增/编辑基础信息
    async handleEdit(row) {
      if (row && row.id) {
        /* const productAdvertisementDTOList = [
          { sort: 0, picUrl: 'https://testimg.quanyou.com.cn/group1/M01/01/CD/rB8Mk2KkCQeAL_jFAAAciJvhfV4427.png' },
          { sort: 1, picUrl: 'https://testimg.quanyou.com.cn/group1/M01/01/CD/rB8MkmKkCQeAJEn4AAFObr6LJgs222.png' }
        ] */
        let productAdvertisementDTOList = []
        await getProductAdList(row.id).then(res => {
          productAdvertisementDTOList = res.data || []
        })
        const showPlatform = row.showPlatform ? row.showPlatform.split(',') : []
        this.detailData = { ...row, ...{ showPlatform, productAdvertisementDTOList }}
      } else {
        this.detailData = {
          levelType: 'FIRST',
          parent: '0'
        }
      }
      this.$nextTick(() => {
        this.showEdit = true
      })
    }
  }
}
</script>
<style lang='scss' scoped>
  .my-txt-btn{
    padding: 0 !important;
  }
  .picIcon{
    width: 48px;
    height: 48px;
    line-height: 1;
    font-size: 48px;
    color: #333;
  }
 .cover-image{
    padding: 5px 0;
    line-height: 0;
    font-size: 0;
    img{
      max-height: 70px;
      max-width: 100px;
      object-fit: cover;
    }
  }
.nav-tab-list{
  /deep/ .function-box{
    .btn-box{
      display: flex;
      flex: 1;
    }
    .head-tips{
      flex: 1;
      line-height: 28px;
      color: #999;
    }
    .head-tips~.el-button{
      margin-top: 0 !important;
    }
  }
  /deep/ .table-list-box{
    .cell{
      display: flex;
      align-items: center;
    }
  }
}
</style>
